<template>
  <div class="presentItem" :style="imgStyle1">
    <div class="head">
      <el-dropdown :hide-on-click="false" class="tu">
        <span class="el-dropdown-link">
          {{ projects.name }}<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item
            ><svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-jinhangzhong"></use>
            </svg>
            {{ projects.name }}</el-dropdown-item
          >
          <el-dropdown-item divided @click.native="allItems"
            >全部项目</el-dropdown-item
          >
        </el-dropdown-menu>
      </el-dropdown>
      <ul>
        <li v-for="(item, index) in nav" :key="index" @click="hha(index)">
          <router-link :to="{ name: item.path }" active-class="active">
            {{ item.msg }}
          </router-link>
        </li>
      </ul>
    </div>
    <div class="presentItem-nei">
      <router-view v-if="isRouterAlive"></router-view>
    </div>
  </div>
</template>

<script>
import "@/assets/css/Items.css";
import { mapState } from "vuex";
export default {
  name: "Items",
  data() {
    return {
      imgStyle1: {
        backgroundImage: `url(${require("@/assets/images/bgc.png")})`,
      },
      isRouterAlive: true,
      i: 0,
      // 头部导航
      nav: [
        { msg: "迭代", path: "Diedai" },
        { msg: "用户故事", path: "Userstory" },
      ],
    };
  },
  provide() {
    return {
      reload1: this.reload1,
    };
  },
  computed: { ...mapState("UserStory", ["projects"]) },
  methods: {
    //查看所有项目
    allItems() {
      this.$router.push({
        name: "UserProgram",
      });
    },
    //局部刷洗
    reload1() {
      this.isRouterAlive = false;
      this.$nextTick(function () {
        this.isRouterAlive = true;
      });
    },
    hha(index) {
      this.i = index;
    },
  },
  created() {
    if (this.$router.path !== "/Ordinaryuser/Items") {
      this.$router.replace("/Ordinaryuser/Items");
    }
  },
};
</script>

<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
// 项目下拉框的样式
.el-dropdown-link {
  cursor: pointer;
  color: rgb(10, 6, 6);
  font-size: 22px;
  &:hover {
    color: skyblue;
  }
}
.el-icon-arrow-down {
  font-size: 22px;
}
.el-dropdown-menu__item {
  padding: 0 30px;
  text-align: center;
}
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.4em;
  fill: currentColor;
  overflow: hidden;
  font-size: 4em;
}
/deep/.el-tabs__nav {
  white-space: nowrap;
  width: 100%;
  display: flex;
  justify-content: center;
}
//导航
.active {
  color: rgb(0, 100, 255) !important;
  transition: all 0.2s;
}
.table {
  .el-table td.el-table__cell,
  .el-table th.el-table__cell.is-leaf {
    border-right: 1px solid #ebeef5 !important;
    text-align: center;
  }
  .cell {
    display: -webkit-box;
    display: -moz-box;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1; /*显示行数*/
  }
  .el-table td.el-table__cell {
    color: #000;
  }
  .el-table th.el-table__cell.is-leaf {
    color: rgb(3, 37, 70);
    font-size: 18px;
    font-weight: 400;
  }
}
</style>